<template>
  <transition :name="currentTransition">
    <div :id="id"  v-show="value" :style="style" class="ssit-popup" :class="[menuButtonId?'ssit-popup-menu':'',position ? 'ssit-popup-' + position : '',arrow]">
      <slot name="header">
        <div class="header" v-if="!menuButtonId">
          <div v-show="showBack" class="back-button" @click="close"></div>
          <div class="title">{{title}}</div>
          <div v-show="!showBack" class="close" @click="close"></div>
        </div>
      </slot>
      <slot></slot>
    </div>
  </transition>
</template>
<script type="text/babel">
  import Popup from './popup';
  export default {
    name: 'ssit-popup',

    mixins: [Popup],

    props: {
      modal: {
        default: true
      },

      modalFade: {
        default: false
      },

      lockScroll: {
        default: false
      },

      closeOnClickModal: {
        default: true
      },

      popupTransition: {
        type: String,
        default: 'popup-slide'
      },

      position: {
        type: String,
        default: ''
      },

      radius:{
        type:String,
        default:""
      },
      minWidth:{
        type:Number,
        default:undefined
      },
      maxWidth:{
        type:Number,
        default:undefined
      },
      minHeight:{
        type:Number,
        default:undefined
      },
      maxHeight:{
        type:Number,
        default:undefined
      },
      title:{
        type:String,
        default:""
      },
      menuButtonId:{
        type:String,
        default:""
      },
      showBack:{
        type:Boolean,
        default:false
      }
    },

    data() {
      return {
        id:"ssitPopUp"+Math.floor(Math.random()*1000000),
        currentTransition: this.popupTransition,
        style:null,
        arrow:''
      };
    },
    computed:{
    },
    methods:{
      customerStyle(){
        this.arrow = "";
        let style = {};
        if(this.menuButtonId){
          let menuBtn = document.getElementById(this.menuButtonId);
          if(menuBtn){
            this.style = this.computeMenuPosition(menuBtn.getBoundingClientRect());
          }
        }else{
          if(this.radius!=''){
            this.setRadius(style);
          }
          if(this.minWidth!=undefined){
            style.minWidth = this.minWidth+"vw";
          }
          if(this.maxWidth!=undefined){
            style.maxWidth = this.maxWidth+"vw";
            style.overflowX = "auto";
          }
          if(this.minHeight!=undefined){
            style.minHeight = this.minHeight+"vh";
          }
          if(this.maxHeight!=undefined){
            style.maxHeight = this.maxHeight+"vh";
            style.overflowY = "auto";
          }
          this.style = style
        }
      },
      computeMenuPosition(menuBtnRect){
        let bottom = menuBtnRect.bottom;
        let top = menuBtnRect.top;
        let left = menuBtnRect.left;
        let right = menuBtnRect.right;
        let style = {}
        let container = document.getElementById(this.id).getBoundingClientRect();
        console.log(container)
        let arrowHPosition = "left";
        let arrowVPosition = "top";
        let windowWidth = document.documentElement.clientWidth;
        let windowHeight = document.documentElement.clientHeight;
        if(left+container.width>windowWidth){
          arrowHPosition = "right"
        }
        if(top+container.height>windowHeight){
          arrowVPosition = "bottom"
        }
        if(arrowHPosition=="left"){
          let menuLeft = left-10;
          style.left = (menuLeft<0?0:menuLeft)+"px"
        }else{
          let menuRight = windowWidth-right-10;
          style.right = (menuRight<0?0:menuRight)+"px";
          style.left = "auto";
        }
        if(arrowVPosition=="top"){
          style.top = (bottom+10)+"px";
        }else{
          let menuBottom = windowHeight-top+10;
          style.bottom = (menuBottom)+"px";
          style.top = "auto";
        }
        this.arrow = arrowHPosition+"-"+arrowVPosition+"-arrow";
        if(this.radius!=''){
          this.setRadius(style);
        }
        style['--gap']=menuBtnRect.width/2+"px"
        return style;
      },
      setRadius(style){
        if(this.position=="top"){
          style.borderBottomLeftRadius = style.borderBottomRightRadius = this.radius;
        }else if(this.position == "bottom"){
          style.borderTopLeftRadius = style.borderTopRightRadius = this.radius;
        }else if(this.position == "left"){
          style.borderTopRightRadius = style.borderBottomRightRadius = this.radius;
        }else if(this.position =="right"){
          style.borderTopLeftRadius = style.borderBottomLeftRadius = this.radius;
        }else{
          style.borderBottomLeftRadius = style.borderBottomRightRadius = style.borderTopLeftRadius = style.borderTopRightRadius = this.radius;
        }
      }
    },
    watch: {
      value(val) {
        this.$emit('input', val);
        if(val&&this.menuButtonId){
          this.$nextTick(()=>{
            this.customerStyle();
          })
        }
      },
      menuButtonId(){
        this.customerStyle();
      }
    },
    beforeMount() {
      if (this.popupTransition !== 'popup-fade') {
        this.currentTransition = `popup-slide-${ this.position }`;
      }
    },
    mounted() {
      this.customerStyle();
      if (this.value) {
        this.rendered = true;
        this.open();
      }
    }
  };
</script>
<style lang="scss">
  @mixin arrow(){
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .1rem;
    border-color: #fff #fff transparent transparent;
    content: " ";
    position: absolute;
    transform: rotate(-45deg);
    box-shadow: .02rem -.02rem .02rem  rgba(0, 0, 0, 0.1);
    z-index: 0;
    border-radius: .02rem;
  }
  .ssit-popup {
    position: fixed;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    transition: .2s ease-out;
    display: flex;
    flex-direction: column;
    .header{
      min-height: .5rem;
      display: flex;
      flex-direction: row;
      margin: .2rem;
      align-items: center;
      .back-button{
        width: .21rem;
        height: .21rem;
        margin-left: .14rem;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border-bottom: .03rem solid #747474;
        border-left: .03rem solid #747474;
        -webkit-transform: rotate(45deg);
      }
      .title{
        margin-left: .5rem;
        flex-grow: 1;
        text-align: center;
        font-size: .32rem;
        line-height: .5rem;
        font-weight: bold;
      }
      .close{
        width: .36rem;
        height: .36rem;
        margin-right: .14rem;
        position: relative;
        display: inline-block;
        overflow: hidden;
        &:before {
          transform: rotate(45deg);
        }
        &:after {
          transform: rotate(-45deg);
        }
        &:before, &:after {
          content: '';
          position: absolute;
          height: .04rem;
          width: 100%;
          top: 50%;
          left: 0;
          margin-top: -1px;
          background: #747474;
        }
      }
    }
    .content{
      flex-grow: 1;
      overflow: auto;
    }
  }
  .ssit-popup-menu{
    transform: none;
    transition: 0s ease-out;
    box-shadow: 0 0 .1rem 0 rgba(0, 0, 0, 0.4);

  }
  .ssit-popup-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }

  .ssit-popup-right {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translate3d(0, -50%, 0);
  }

  .ssit-popup-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }

  .ssit-popup-left {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translate3d(0, -50%, 0);
  }

  .popup-slide-top-enter,
  .popup-slide-top-leave-active {
    transform: translate3d(-50%, -100%, 0);
  }

  .popup-slide-right-enter,
  .popup-slide-right-leave-active {
    transform: translate3d(100%, -50%, 0);
  }

  .popup-slide-bottom-enter,
  .popup-slide-bottom-leave-active {
    transform: translate3d(-50%, 100%, 0);
  }

  .popup-slide-left-enter,
  .popup-slide-left-leave-active {
    transform: translate3d(-100%, -50%, 0);
  }

  .popup-fade-enter,
  .popup-fade-leave-active {
    opacity: 0;
  }
  .v-modal-enter {
    animation: v-modal-in .2s ease;
  }

  .v-modal-leave {
    animation: v-modal-out .2s ease forwards;
  }

  @keyframes v-modal-in {
    0% {
      opacity: 0;
    }
    100% {
    }
  }

  @keyframes v-modal-out {
    0% {
    }
    100% {
      opacity: 0;
    }
  }

  .v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
  }
  .menu-modal{
    opacity: 0;
  }
  .left-top-arrow{
    &::before {
      @include arrow();
      top: -.1rem;
      left: var(--gap);
    }
  }
  .left-bottom-arrow{
    &::after {
      @include arrow();
      bottom: -.1rem;
      left: var(--gap);
      transform: rotate(135deg);
    }
  }
  .right-top-arrow{
    &::before {
      @include arrow();
      top: -.1rem;
      right: var(--gap);
    }
  }
  .right-bottom-arrow{
    &::before {
      @include arrow();
      bottom: -.1rem;
      right: var(--gap);
      transform: rotate(135deg);
    }
  }
</style>
